<template>
  <div class="upload-wrap">
    <!-- 用来上传的 -->
    <!-- 
      action： 上传图片的地址（会自动上传到这个地址）
        它默认发的是post请求，并且参数名叫file
        如果以后你要上传，但是发的不是post请求，或者参数名不叫file
        就不能用这种默认的上传方式，就要自定义上传

      list-type="picture-card" 就是设置为照片墙效果
      :on-preview： 当点击预览图标触发的钩子
      :on-remove：  当点击删除图标触发的钩子
      file-list： 保存上传的图片的数组
      :http-request：用来做自定义上传
            只要一加这个钩子就不会用默认上传了，而是你用钩子里写的上传代码
      :on-change： 当文件状态发生改变触发
                  比如说添加、比如说删除

       :before-upload="beforeAvatarUpload" 上传前会调用的钩子
            在这个钩子里可以做一些类型的判断和文件大小的判断
            如果为true才会帮你去做上传，为false不做上传
     -->
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :class="{ disabled: isDisabled }"
      :file-list="fileList"
      :http-request="upload"
      :on-change="handleChange"
      :before-upload="beforeAvatarUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <!-- 进度条 -->
    <el-progress v-if="showProg" style="width: 180px" :percentage="percent" />

    <!-- 预览图片的对话框 -->
    <el-dialog
      class="pic-dialog"
      title="预览图片"
      :visible.sync="dialogVisible"
    >
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
// 导入
import COS from "cos-js-sdk-v5";
// 实例化一个操作腾讯云的对象
let cos = new COS({
  // 密钥id
  SecretId: "AKIDb2D7mBJAk48vRhfMmvnOhjLhmbCXbOvB",
  // 密钥key
  SecretKey: "0jALFrCI8hz0kDOIwJOCjzxe5F8k59wS",
});

export default {
  computed: {
    isDisabled() {
      return this.fileList.length > 0;
    },
  },

  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      // 保存图片列表
      fileList: [],
      // 控制进度条的显示
      showProg: false,
      percent: 0,
    };
  },

  methods: {
    // 上传之前的回调函数
    beforeAvatarUpload(file) {
      // 判断这个文件类型是否为jpg格式
      const isJPG =
        file.type === "image/jpeg" ||
        file.type == "image/png" ||
        file.type == "image/gif";

      // 判断这个文件大小是否超过2M
      const isLt2M = file.size / 1024 / 1024 < 2;

      // 如果不是JPG
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }

      // 如果超过2M
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }

      // 如果都满足了返回一个true，返回true就代表继续去帮你做上传
      // 返回false就不上传
      return isJPG && isLt2M;
    },
    // 文件状态改变触发
    handleChange(file, fileList) {
      // file就是改变的图片（例如你是添加的话，file就是添加的这张图片）
      // fileList就是改变后的文件数组
      // 因为我们只能添加一张，那么这里的fileList就是长度为一的数组
      // 赋值给this.fileList,this.fileList就有值了，有值就能让那个可以上传的框隐藏了
      this.fileList = fileList;
    },
    // 点击删除图片触发的钩子
    handleRemove(file, fileList) {
      // 点击删除后清空数组，那么上传就可以显示了
      this.fileList = [];
    },

    // 当前点击预览的图片信息
    handlePictureCardPreview(file) {
      // 把图片的路径赋值给对话框里的img
      // 并且再让对话框显示
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    upload(params) {
      // 把我们上传的代码写到这即可
      // 参数里有一个属性叫file，就是我们选择的图片对象
      // file对象里有个name属性，就是图片名字
      // console.log('我要做上传', params.file)
      this.showProg = true;
      cos.putObject(
        {
          // 存储桶名字
          Bucket: "hmhr72-1306801437" /* 必须 */,
          Region: "ap-guangzhou" /* 存储桶所在地域，必须字段 */,
          // key就是你上传后的文件名
          Key: params.file.name /* 必须 */,
          StorageClass: "STANDARD",
          Body: params.file, // 上传文件对象

          // 是一个回调：上传进度的回调函数
          onProgress: (progressData) => {
            // 参数里有个属性叫percent就有进度，但是进度是0-1
            // 而我们的进度是0-100，所以要乘以100做一个转换
            // console.log(progressData);
            this.percent = progressData.percent * 100;
          },
        },
        // 上传成功或失败会调用的回调函数
        // 如果err有值代表失败了，如果没有值代表成功了
        (err, data) => {
          if (!err) {
            // 上传成功后的图片地址在data.Location
            // console.log(data.Location);
            this.fileList = [{ url: "http://" + data.Location }];
          }
          this.percent = 0;
          this.showProg = false;
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.upload-wrap {
  .disabled {
    ::v-deep .el-upload--picture-card {
      display: none;
    }
  }
}
</style>